/*
 * @Description: 设置变色
 * @Author: iamsmiling
 * @Date: 2021-05-31 08:25:17
 * @LastEditTime: 2021-06-15 17:56:58
 */
import 'package:credit_business_circle/R/R.dart';
import 'package:credit_business_circle/components/button/roatet_button.dart';
import 'package:credit_business_circle/components/dash_border/dash_border.dart';
import 'package:credit_business_circle/pages/discoloration/discoloration_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class DiscolorationPage extends GetView<DiscolorationController> {
  const DiscolorationPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("设置变色"),
      ),
      body: SingleChildScrollView(
        child: Container(
          decoration: BoxDecoration(
              color: R.color.ffffffff,
              border: Border.all(color: R.color.ffeeeeee),
              borderRadius: BorderRadius.circular(R.dimen.sp5)),
          margin: EdgeInsets.all(R.dimen.dp14),
          padding: EdgeInsets.only(
              left: R.dimen.dp15,
              right: R.dimen.dp15,
              top: R.dimen.dp24,
              bottom: R.dimen.dp34),
          child: Column(children: [
            Row(
              children: [
                Text(
                  "可使用变色卡：",
                  style: TextStyle(
                      fontSize: R.dimen.sp15, color: R.color.ff444444),
                ),
                Text(
                  "15张",
                  style: TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: R.dimen.sp15,
                      color: R.color.ff111111),
                ),
                Spacer(),
                Container(
                  padding: EdgeInsets.symmetric(
                      horizontal: R.dimen.dp18, vertical: R.dimen.dp5),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(R.dimen.sp15),
                      gradient: LinearGradient(
                          colors: [R.color.ff33cda0, R.color.ff25b48a])),
                  child: Text(
                    "购买",
                    style: TextStyle(
                        fontSize: R.dimen.sp13, color: R.color.ffffffff),
                  ),
                )
              ],
            ),
            Container(
              margin: EdgeInsets.only(
                  top: R.dimen.dp28, left: R.dimen.dp84, right: R.dimen.dp84),
              child: ElevatedButton(
                onPressed: () {},
                child: Text("单次立即使用"),
                style: ButtonStyle(
                  padding: MaterialStateProperty.all(
                      EdgeInsets.symmetric(vertical: R.dimen.dp10)),
                  shape: MaterialStateProperty.all(StadiumBorder()),
                  backgroundColor: MaterialStateProperty.all(R.color.ff08abc3),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: R.dimen.dp24),
              child: Text.rich(
                TextSpan(
                    style: TextStyle(
                        height: 1.5,
                        fontSize: R.dimen.sp13,
                        color: R.color.ff222222),
                    children: [
                      WidgetSpan(
                          child: Container(
                              margin: EdgeInsets.only(right: R.dimen.dp6),
                              child: Image.asset(R.image.warning))),
                      TextSpan(text: "使用后合作信息会展示在全部类型首页靠前位置，并带有"),
                      WidgetSpan(
                          child: Container(
                              margin:
                                  EdgeInsets.symmetric(horizontal: R.dimen.dp6),
                              padding: EdgeInsets.symmetric(
                                  horizontal: R.dimen.dp10,
                                  vertical: R.dimen.dp2),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.only(
                                    bottomLeft: Radius.circular(R.dimen.sp8),
                                    topRight: Radius.circular(R.dimen.sp8),
                                  ),
                                  color: R.color.fffd8b05),
                              child: Text(
                                "头条",
                                style: TextStyle(
                                    fontSize: R.dimen.sp11,
                                    color: R.color.ffffffff),
                              ))),
                      TextSpan(text: "图标一小时，提高合作信息的曝光度。"),
                      WidgetSpan(
                        child: Row(
                          children: [
                            Spacer(),
                            Text(
                              "示例",
                              textAlign: TextAlign.end,
                              style: TextStyle(
                                  height: 1.2,
                                  color: R.color.ff13a0f1,
                                  fontSize: R.dimen.sp13),
                            )
                          ],
                        ),
                      )
                    ]),
                softWrap: true,
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: R.dimen.sp34),
              child: Divider(),
            ),
            Container(
              child: Row(
                children: [
                  Text(
                    "使用次数",
                    style: TextStyle(
                        color: R.color.ff111111,
                        fontSize: R.dimen.sp15,
                        fontWeight: FontWeight.w600),
                  ),
                  Spacer(),
                  Container(
                    margin: EdgeInsets.only(right: R.dimen.dp15),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(R.dimen.sp3),
                        border: Border.all(
                          color: R.color.ffcccccc,
                        )),
                    width: R.dimen.dp90,
                    height: R.dimen.dp40,
                    child: TextFormField(
                      initialValue: "15",
                      style: TextStyle(
                          fontSize: R.dimen.sp16,
                          color: R.color.ff111111,
                          fontWeight: FontWeight.w600),
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                          border: InputBorder.none,
                          enabledBorder: InputBorder.none,
                          focusedBorder: InputBorder.none),
                    ),
                  ),
                  Text(
                    "张",
                    style: TextStyle(
                        color: R.color.ff111111,
                        fontSize: R.dimen.sp15,
                        fontWeight: FontWeight.w600),
                  )
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: R.dimen.dp22),
              width: R.dimen.width,
              child: DashedRect(
                strokeWidth: 1,
                gap: 2,
                color: R.color.ffdddddd,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: R.dimen.dp36),
              child: Row(
                children: [
                  Text(
                    "每张卡使用的时间间隔",
                    style: TextStyle(
                        color: R.color.ff111111,
                        fontSize: R.dimen.sp15,
                        fontWeight: FontWeight.w600),
                  ),
                  Spacer(),
                  Container(
                    margin: EdgeInsets.only(right: R.dimen.dp15),
                    alignment: Alignment.center,
                    padding: EdgeInsets.symmetric(horizontal: R.dimen.dp10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(R.dimen.sp3),
                        border: Border.all(
                          color: R.color.ffcccccc,
                        )),
                    height: R.dimen.dp40,
                    child: RotateButton(
                      onPressed: () => Future.value(),
                      label: Text(
                        "1小时15分钟    ",
                        style: TextStyle(
                            fontSize: R.dimen.sp16,
                            color: R.color.ff111111,
                            fontWeight: FontWeight.w600),
                      ),
                    ),
                  ),
                  Text(
                    "张",
                    style: TextStyle(
                        color: R.color.ff111111,
                        fontSize: R.dimen.sp15,
                        fontWeight: FontWeight.w600),
                  )
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(
                  left: R.dimen.dp84,
                  right: R.dimen.dp84,
                  bottom: R.dimen.dp40),
              child: ElevatedButton(
                onPressed: () {},
                child: Text("开始批量使用变色卡"),
                style: ButtonStyle(
                  padding: MaterialStateProperty.all(
                      EdgeInsets.symmetric(vertical: R.dimen.dp10)),
                  shape: MaterialStateProperty.all(StadiumBorder()),
                  backgroundColor: MaterialStateProperty.all(R.color.ff1bbf8e),
                ),
              ),
            ),
            Container(
              child: Text.rich(
                TextSpan(
                    style: TextStyle(
                        height: 1,
                        fontSize: R.dimen.sp13,
                        color: R.color.ff222222),
                    children: [
                      WidgetSpan(
                          child: Container(
                              margin: EdgeInsets.only(right: R.dimen.dp6),
                              child: Image.asset(R.image.warning))),
                      TextSpan(
                          text: "可一次性批量使用头条卡，系统每间隔相应时间会自动置顶一次，直到批量使用的刷新消耗完毕。",
                          style: TextStyle(
                              height: 1.5,
                              fontSize: R.dimen.sp13,
                              color: R.color.ff222222)),
                    ]),
              ),
            ),
          ]),
        ),
      ),
    );
  }
}
